<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智慧社区后台</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap-table/css/bootstrap-table.css">
</head>
<style>
</style>
<body style="padding-bottom: 90px; background-color: #ECF0F5;">
	<section class="content" style="margin: 15px; background-color: white;">
		<div class="row">
			<div class="col-sm-12">
				<table id="table">
					<thead style="background-color: #00C0EF">
						<tr style="background-color: #00C0EF">
							<th></th>
							<th>商户账号</th>
							<th>商户名称</th>
							<th>商户邮箱</th>
							<th>商户手机</th>
                            <th>负责人</th>
                            <th>注册时间</th>
                            <th>账号状态</th>
                            <th>操作</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</section>
    <!-- Large modal -->
    <div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">商户详情</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="merchantAccount" class="control-label">商户账号:</label>
                        <strong id="merchantAccount"></strong>
                    </div>
                    <div class="form-group">
                        <label for="merchantName" class="control-label">商户名称:</label>
                        <strong id="merchantName"></strong>
                    </div>
                    <div class="form-group">
                        <label for="merchantStatus" class="control-label">账号状态:</label>
                        <strong id="merchantStatus"></strong>
                    </div>
                    <div class="form-group">
                        <label for="merchantEmail" class="control-label">商户邮箱:</label>
                        <strong id="merchantEmail"></strong>
                    </div>
                    <div class="form-group">
                        <label for="merchantPhone" class="control-label">商户手机:</label>
                        <strong id="merchantPhone"></strong>
                    </div>
                    <div class="form-group">
                        <label for="responsible" class="control-label">负责人:</label>
                        <strong id="responsible"></strong>
                    </div>
                    <div class="form-group">
                        <label for="bankCard" class="control-label">银行卡号:</label>
                        <strong id="bankCard"></strong>
                    </div>
                    <div class="form-group">
                        <label for="communityId" class="control-label">所属部门:</label>
                        <strong id="communityId"></strong>
                    </div>
                    <div class="form-group">
                        <label for="createTime" class="control-label">创建时间:</label>
                        <strong id="createTime"></strong>
                    </div>
                    <div class="form-group">
                        <label class="control-label">证件照:</label>
                        <a id="passport" target="_blank">查看</a>
                    </div>
                    <div class="form-group">
                        <label class="control-label">商户描述:</label>
                        <p id="description"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-toolbar.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-filter-control.js"></script>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script>

    var merchantIds = [];
	//表格字段配置
	var table_dataSet = [
	    {
            field : 'id',
            checkbox : true
	    },
        {
            field : 'merchantAccount',
            align : 'center'
	    },
        {
            field : 'merchantName',
            align : 'center'
	    },
        {
            field : 'merchantEmail',
            align : 'center'
	    },
        {
            field : 'merchantPhone',
            align : 'center'
        },
        {
            field : 'responsible',
            align : 'center'
        },
        {
            field : 'createTime',
            align : 'center'
        },
        {
            align : 'center',
            formatter : function (value, row, index) {
                if (row.merchantStatus === 0){
                    return '<button class="btn btn-warning btn-xs" onclick="changeStatus(\'' + row.merchantId + '\',1)">已禁用</button>';
                } else{
                    return '<button class="btn btn-success btn-xs" onclick="changeStatus(\'' + row.merchantId + '\',0)">已启用</button>';
                }
            }
        },
        {
            align : 'center',
            width : 150,
            formatter : function (value, row, index) {
                return ['<button class="btn btn-primary btn-xs" onclick="showModal(\'' + row.merchantId + '\')">详情</button>',
                    '&nbsp;<button class="btn btn-danger btn-xs" onclick="delByIds([\'' + row.merchantId + '\'])">删除</button>'].join('');
            }
        }
    ];
	//渲染表格
	$('#table').bootstrapTable({
        url : '${pageContext.request.contextPath}/selectMerchantPager',
        method: 'post',
        idField : 'id',
        columns : table_dataSet,
        clickToSelect: false,
        striped : true, //是否显示行间隔色
        pagination : true, //是否显示分页
        pageSize : 10, //每页的记录行数
        pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数
        search : true, //是否显示搜索
        showRefresh : true,
        sidePagination : 'server', //表示服务端请求
        toolbar : '<button class="btn btn-danger glyphicon glyphicon-trash" onclick="dels()">批量删除</button>',
        icons : {
            paginationSwitchDown : 'glyphicon-collapse-down icon-chevron-down',
            paginationSwitchUp : 'glyphicon-collapse-up icon-chevron-up',
            refresh : 'glyphicon-refresh icon-refresh',
            toggle : 'glyphicon-list-alt icon-list-alt',
            columns : 'glyphicon-th icon-th',
            detailOpen : 'glyphicon-plus icon-plus',
            detailClose : 'glyphicon-minus icon-minus',
            export : 'glyphicon-export icon-share'
        },
        showExport : true,
        exportDataType : 'basic',
        exportTypes : [ 'json', 'xml', 'csv', 'txt', 'sql', 'excel' ]
    });

	function showModal(merchantId) {
        $.ajax({
            url : '${pageContext.request.contextPath}/selectMerchantById',
            type : 'post',
            data : {merchantId : merchantId},
            success : function(data) {
                if (data.result === 0){
                    var merchant = data.merchant;
                    $("#merchantAccount").text(merchant.merchantAccount);
                    $("#merchantName").text(merchant.merchantName);
                    $("#merchantStatus").text(merchant.merchantStatus===0?'已禁用':'已启用');
                    $("#merchantEmail").text(merchant.merchantEmail);
                    $("#merchantPhone").text(merchant.merchantPhone);
                    $("#responsible").text(merchant.responsible);
                    $("#bankCard").text(merchant.bankCard);
                    $("#communityId").text(merchant.communityId);
                    $("#description").text(merchant.description);
                    $("#createTime").text(merchant.createTime);
                    $("#passport").attr('href','/upload/zhsq_app_merchant/merchant/'+merchant.passport);
                    $('#modal').modal({
            			backdrop : 'static',
            			keyboard : false
            		});
                } else {

                }
            },
            error : function() {
                layer.msg('系统异常!', {icon: 2, time: 800});
            }
        });
	}

	//批量删除
	function dels() {
        merchantIds = [];
        $.each($('#table').bootstrapTable('getSelections'),function (k,v) {
            merchantIds.push(v.merchantId);
        });
        // console.log(merchantIds);
        if (merchantIds.length > 0){
            delByIds(merchantIds);
        } else {
            layer.alert('请先选择要删除的项！')
        }
    }

	//删除
	function delByIds(ids) {
	    layer.confirm('确认要删除吗？',function (index) {
            $.ajax({
                url : '${pageContext.request.contextPath}/deleteMerchantByIds',
                type : 'post',
                data : {
                    ids : ids
                },
                success : function(data) {
                    if (data.result === 0){
                        layer.msg('删除成功!', {icon: 1, time: 800});
                        $('#table').bootstrapTable('refresh')
                    } else{
                        layer.msg('删除失败!', {icon: 5, time: 800});
                    }
                },
                error : function(error) {
                    console.log(error);
                    layer.msg('系统异常!', {icon: 2, time: 800});
                }
            });
        });
    }

    //更新账号状态
    function changeStatus(id,status) {
        layer.confirm(status === 0 ? '确认要禁用吗？' : '确认要启用吗？',function (index) {
            $.ajax({
                url : '${pageContext.request.contextPath}/updateMerchantStatusById',
                type : 'post',
                data : {
                    merchantId : id,
                    merchantStatus: status
                },
                success : function(data) {
                    if (data.result === 0){
                        layer.msg(status === 0 ? '已禁用' : '已启用', {icon: 1, time: 800});
                        $('#table').bootstrapTable('refresh')
                    }
                },
                error : function(error) {
                    console.log(error);
                    layer.msg('系统异常!', {icon: 2, time: 800});
                }
            });
        });
    }
</script>
</html>
